<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>

    <title>Profile</title>

    <link th:href="@{/css/bootstrap.min.css}" rel="stylesheet"/>
    <link th:href="@{/font-awesome/css/font-awesome.css}" rel="stylesheet"/>

    <link th:href="@{/css/plugins/toastr/toastr.min.css}" rel="stylesheet" />
    <link th:href="@{/css/plugins/switchery/switchery.css}" rel="stylesheet" />

    <link th:href="@{/css/animate.css}" rel="stylesheet"/>
    <link th:href="@{/css/style.css}" rel="stylesheet"/>
</head>
<body>
<div id="wrapper">
    <div th:include="common/navbar_left :: navbar_left"></div>

    <div id="page-wrapper" class="gray-bg">
        <div class="row border-bottom" th:include="common/navbar_header :: navbar_header"></div>
        <div class="row wrapper border-bottom white-bg page-heading">
            <div class="col-lg-7">
                <h2>Profile</h2>
                <ol class="breadcrumb">
                    <li>
                        <a href="#">Home</a>
                    </li>
                    <li class="active">
                        <strong>Profile</strong>
                    </li>
                </ol>
            </div>
            <div class="col-lg-5">
                　<h2 style="color:#1AB394;"><strong>Please Update Your Personal Information！</strong></h2>
            </div>
        </div>
        <div class="wrapper wrapper-content">
            <div class="row animated fadeInRight">
                <div class="col-md-4">
                    <div class="ibox float-e-margins">
                        <div class="ibox-title">
                            <h5>Profile Detail</h5>
                        </div>
                        <div>
                            <div class="ibox-content no-padding border-left-right">
                                <img alt="image" class="img-responsive"
                                     th:src="@{https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif?imageView2/1/w/450/h/300 }"/>
                            </div>
                            <div class="ibox-content profile-content">
                                <h4><strong th:text="${session.user_name}"></strong></h4>
                                <h5>
                                    About me
                                </h5>
                                <p>
                                    About me. About me. About me. About me. About me. About me. About me. About me.
                                    About me. About me. About me. About me.
                                </p>
                                <div class="user-button">
                                    <div class="row">
                                        <div class="col-md-6">
                                            <button type="button" class="btn btn-primary btn-sm btn-block">
                                                <i class="fa fa-envelope"></i> Be My Friend
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-8">
                    <div class="ibox float-e-margins">
                        <div class="ibox-title">
                            <h5>More Detail</h5>
                        </div>
                        <div class="ibox-content">
                            <form method="post" class="form-horizontal" th:action="@{/user/profile/update.html}">
                                <div class="form-group"><label class="col-sm-2 control-label">User ID</label>
                                    <div class="col-sm-8"><p class="form-control-static" th:text="${student.sId}"></p></div>
                                </div>
                                <div class="hr-line-dashed"></div>
                                <div class="form-group"><label class="col-sm-2 control-label">User Name</label>
                                    <div class="col-sm-8"><input type="text" name="name" class="form-control" th:value="${student.name}"/></div>
                                </div>
                                <div class="hr-line-dashed"></div>
                                <div class="form-group"><label class="col-sm-2 control-label">Email</label>
                                    <div class="col-sm-8"><p class="form-control-static" th:text="${student.email}"></p></div>
                                </div>
                                <div class="hr-line-dashed"></div>
                                <div class="form-group"><label class="col-sm-2 control-label">University</label>
                                    <div class="col-sm-8"><input type="text" name="university" class="form-control" th:value="${student.university}"/></div>
                                </div>
                                <div class="hr-line-dashed"></div>
                                <div class="form-group"><label class="col-sm-2 control-label">Major</label>
                                    <div class="col-sm-8"><input type="text" name="major" class="form-control" th:value="${student.major}"/></div>
                                </div>
                                <div class="hr-line-dashed"></div>
                                <div class="form-group"><label class="col-sm-2 control-label">GPA</label>
                                    <div class="col-sm-4"><input type="text" name="gpa" class="form-control" th:value="${student.gpa}"/></div>
                                    <input id="gpa_status" name="gpa_status" type="hidden" value=""/>
                                    <input id="gpa_status_db" type="hidden" th:value="${student.gpaStatus}"/>
                                    <label class="col-sm-2 control-label">Show For Everyone</label>
                                    <div class="col-sm-2">
                                        <input type="checkbox" id="gpa_switchery" class="js-switch_3"/>
                                    </div>
                                </div>
                                <div class="hr-line-dashed"></div>
                                <div class="form-group"><label class="col-sm-2 control-label">Resume</label>
                                    <div class="col-sm-8"><textarea type="text" name="resume" class="form-control" th:text="${student.resume}"/></div>
                                </div>
                                <div class="hr-line-dashed"></div>
                                <div class="form-group">
                                    <div class="col-sm-4 col-sm-offset-2">
                                        <button class="btn btn-primary" type="submit">Save changes</button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="footer">
            <div>
                <strong>Copyright</strong> Jobster &copy; 2018
            </div>
        </div>
    </div>
</div>


<!-- Mainly scripts -->
<div th:include="common/common_js :: common_js"></div>

<!-- Custom and plugin javascript -->
<script th:src="@{/js/inspinia.js}"></script>

<script th:src="@{/js/plugins/toastr/toastr.min.js}"></script>
<!-- Switchery -->
<script th:src="@{/js/plugins/switchery/switchery.js}"></script>

<script th:inline="javascript" type="text/javascript">
    //<![CDATA[
    $(function(){
        toastr.success("Welcome back , " + [[${session.user_name}]] +" !");

        var elem_3 = document.querySelector('.js-switch_3');
        var mySwitch = new Switchery(elem_3, { color: '#1AB394' });
        var status = document.getElementById('gpa_status_db').value;
        if(status === '1'){
            setSwitchery(mySwitch, true);
        }

        elem_3.onchange = function() {
            if (elem_3.checked) {
                document.getElementById('gpa_status').value='1';
            }else {
                document.getElementById('gpa_status').value='0';
            }
        };
    });

    function setSwitchery(switchElement, checkedBool) {
        if ((checkedBool && !switchElement.isChecked()) || (!checkedBool && switchElement.isChecked())) {
            switchElement.setPosition(true);
            switchElement.handleOnchange(true);
        }
    }

    toastr.options = {
        "closeButton": true,
        "debug": false,
        "progressBar": true,
        "preventDuplicates": false,
        "positionClass": "toast-top-right",
        "onclick": null,
        "showDuration": "400",
        "hideDuration": "1000",
        "timeOut": "7000",
        "extendedTimeOut": "1000",
        "showEasing": "swing",
        "hideEasing": "linear",
        "showMethod": "fadeIn",
        "hideMethod": "fadeOut"
    }
    //]]>
</script>
</body>

</html>
